import { Component, Vue } from 'vue-property-decorator';
import style from '@/styles/views/log.module.less';
import { EapLayout } from '@/components';
import { Cell, Icon, NavBar } from 'vant';
import { IRoom } from '@/interfaces/api.interface';

@Component({
  components: {
    'eap-layout': EapLayout,
    'van-nav-bar': NavBar,
    'van-cell': Cell,
    'van-icon': Icon
  }
})
export default class Log extends Vue {
  private get rooms() {
    return this.$store.state.rooms;
  }
  
  public render() {
    return (
      <eap-layout>
        <van-nav-bar title='日志记录' slot='header' />
        <div class={style['log']}>
          {this.rooms.map((item: IRoom) => (
            <van-cell
              title={item.name}
              icon='todo-list-o'
              on-click={() => {
                this.$router.push({ name: 'log-detail', query: { room_id: item.id } });
              }}>
              <van-icon name='arrow' />
            </van-cell>
          ))}
        </div>
      </eap-layout>
    );
  }
}
